<template>
    <div class="pickerMask" v-show="showArea">
        <div class="provCityArea">
            <div class="pickerOpeBox">
                <div class="cancel" @click="cancelPicker">取消</div>
                <div class="title">请选择</div>
                <div class="confirm" @click="confirmPicker">确定</div>
            </div>
            <picker :data="areaData" v-model="pickerArray" :columns="3" @on-change='changePicker'></picker>
        </div>
    </div>
</template>

<script>
import areaData from './city.js'
import { Picker } from 'vux'
export default {

    components: {
        Picker
    },

    props:{
        showArea:{
            type: Boolean,
            default: false
        },
        provId:{
            type: String,
            default: ''
        },
        cityId:{
            type: String,
            default: ''
        },
        areaId:{
            type: String,
            default: ''
        }
    },

    data(){
        return {
            pickerArray: [],
            areaData:[],
            currentAreaArr: []
        }
    },

    created(){
        this.areaData = areaData
    },

    computed:{
        
    },

    methods:{
        changePicker(value){
            this.currentAreaArr = value
        },

        cancelPicker(){
            this.$emit('cancelPicker')
        },

        pickerCallback(){
            if(this.provId && this.cityId && this.areaId){
                this.pickerArray = [this.provId, this.cityId, this.areaId]
            }
        },

        confirmPicker(){
            let provId = this.currentAreaArr[0];
            let cityId = this.currentAreaArr[1];
            let areaId = this.currentAreaArr[2];
            let provName = ''
            let cityName = ''
            let areaName = ''
            areaData.forEach(item => {
                if(item.value == provId){
                    provName = item.name
                }else if(item.value == cityId){
                    cityName = item.name
                }else if(item.value == areaId){
                    areaName = item.name
                }
                if(provName && cityName && areaName){
                    return false;
                }
            })
            if(cityId == '820100'){
                cityId = '820000'
            }else if(cityId == '810100'){
                cityId = '810000'
            }
            this.$emit('cancelPicker')
            this.$emit('changePicker', {provId, cityId, areaId, provName, cityName, areaName})
        }
    }
}
</script>

<style>
.pickerMask{position:fixed; top:0; right:0; bottom:0; left: 0; background: rgba(0,0,0,.2); z-index: 999;}

.provCityArea{background: #fff; position: absolute; bottom: 0; width: 100%;}
.provCityArea .pickerOpeBox{display: flex; font-size: .28rem; border-bottom: .01rem solid #f2f2f2; line-height: .8rem; text-align: center;}
.provCityArea .pickerOpeBox .cancel{flex: 0 0 1rem}
.provCityArea .pickerOpeBox .title{flex: 1;}
.provCityArea .pickerOpeBox .confirm{flex: 0 0 1rem}
</style>
